<template>
    <view class="root">
        <view class="banner">
            <view class="amount">
                <text class="explain">总资产(元)</text>
                <text class="balance">{{ userInfo.balance || "0.00" }}</text>
            </view>
            <view class="withdrawal-topUp">
                <navigator
                    hover-stay-time="100"
                    hover-class="tap-hover"
                    url="withdrawal_topUp?type=0"
                    class="withdrawal"
                >
                    <image
                        class="icon-withdrawal"
                        src="/static/images/icon-withdrawal.png"
                    />
                    <text class="explain">提现</text>
                </navigator>
                <view class="top-up">
                    <navigator class="top-up" url="withdrawal_topUp?type=1">
                        立即充值
                    </navigator>
                </view>
            </view>
        </view>

        <text class="title">{{ userInfo.identity ? "收益" : "支付" }}明细</text>
        <view class="paymentDetail">
            <view
                v-for="(order, index) in paymentDetail.list"
                :key="index"
                @click="selectOrder(order)"
                hover-class="tap-hover"
                hover-stay-time="100"
                class="order"
            >
                <label class="title">
                    <text class="car-type">{{ order.carType }}</text>

                    <image
                        class="icon-more"
                        src="/static/images/icon-more.png"
                    />
                </label>

                <view class="info-box">
                    <view class="info">
                        <label class="gray">{{ order.time }}</label>
                        <view class="address">
                            <label class="green">起始地：</label>
                            <text class="name">{{ order.startPoint }}</text>
                        </view>
                        <view class="address">
                            <label class="blue">目的地：</label>
                            <text class="name">{{ order.destination }}</text>
                        </view>
                    </view>
                    <text class="price">{{ order.price }}元</text>
                </view>
            </view>
            <load-more :status="loadStatus" />
        </view>
    </view>
</template>

<script lang="ts">
    import { Storage } from "@/libs/utils";
    import Vue from "vue";
    import Component from "vue-class-component";
    import { Pager, PaymentDetail, UserInfo } from "../common/api.d";
    import loadMore from "../components/load-more.vue";

    let debounce: boolean = false;

    @Component({ components: { loadMore } })
    export default class Wallet extends Vue {
        paymentDetail: Pager<PaymentDetail> = {
            nextPage: 1,
            list: [],
        };
        loadStatus: string = "loading";
        userInfo: UserInfo | AnyObject = {};

        private onShow(): void {
            this.request.get("/api/personalCenter").then(({ data }) => {
                Storage.update("userInfo", data);
                this.userInfo = Storage.get("userInfo");
            });
        }

        private onLoad(): void {
            this.getData();
        }
        private onReachBottom(): void {
            this.getData();
        }

        public selectOrder(order: any) {
            if (this.userInfo.identity) {
                return;
            }
            uni.navigateTo({ url: `orderInfo?order_id=${order.id}` });
        }
        public getData(): void {
            if (debounce || !this.paymentDetail.nextPage) return;
            debounce = true;
            this.loadStatus = "loading";

            this.request.get("/api/wallet").then(({ data }) => {
                Array.isArray(data.list) &&
                    this.paymentDetail.list.push(...data.list);

                this.paymentDetail.nextPage = +data.nextPage;
                this.loadStatus = +data.page ? "more" : "noMore";
                debounce = false;
            });
        }
    }
</script>

<style lang="scss" scoped>
    .root {
        .icon-more {
            margin-left: 10rpx;
            width: 10rpx;
            height: 18rpx;
        }
        > .banner {
            flex-direction: row;
            justify-content: space-between;
            margin: 10rpx 30rpx;
            padding: 18rpx 30rpx;
            height: 240rpx;
            background-image: linear-gradient(to right, #00ddd8, #418ee0);
            border-radius: 8rpx;

            .explain {
                color: #fff;
                font-size: 24rpx;
            }

            .amount {
                justify-content: center;
                .balance {
                    color: #fff;
                    font-size: 60rpx;
                }
            }
            .withdrawal-topUp {
                .withdrawal {
                    flex-direction: row;
                    align-items: center;
                    justify-content: flex-end;
                    .icon-withdrawal {
                        width: 25rpx;
                        height: 25rpx;
                        margin-right: 8rpx;
                    }
                }

                > .top-up {
                    flex: 1;
                    justify-content: center;
                    navigator {
                        width: 160rpx;
                        height: 60rpx;
                        justify-content: center;
                        background-color: #fff;
                        color: #5487e5;
                        font-size: 24rpx;
                        border-radius: 30rpx;
                    }
                }
            }
        }
        > .title {
            margin: 50rpx 30rpx 30rpx;
            font-size: 36rpx;
            color: #1b1b1b;
        }

        > .paymentDetail {
            .order {
                flex-direction: column;
                align-items: stretch;
                border: 2rpx solid #eee;
                border-radius: 10rpx;
                padding: 30rpx;
                margin: 5px 30rpx;
                font-size: 26rpx;
                color: #666;
                .title {
                    > text {
                        color: #1b1b1b;
                        font-size: 28rpx;
                    }
                    justify-content: space-between;
                }
                .info-box {
                    .info {
                        flex: 1;
                        margin-top: 10rpx;
                        line-height: 1.8;
                        .address {
                            flex-direction: row;
                            align-items: flex-start;
                        }
                        .gray,
                        .green,
                        .blue {
                            &::before {
                                content: "";
                                margin-right: 18rpx;
                                border-radius: 50%;
                                width: 10rpx;
                                height: 10rpx;
                            }
                        }
                        .gray::before {
                            background-color: #b5b5b5;
                        }
                        .green::before {
                            background-color: #00ad84;
                        }
                        .blue::before {
                            background-color: #4888e1;
                        }
                    }
                    .name {
                        margin-left: 12rpx;
                        flex: 1;
                    }
                    .price {
                        text-align: right;
                        color: #1b1b1b;
                        font-size: 26rpx;
                    }
                }
            }
        }
    }
</style>